<template>
	<view class="mt-10 pd-10 flex flex-row flex-nowrap bottom-line">
		<u-avatar
			:text="comment.name.slice(0, 1)"
			fontSize="16"
			:size="30"
			randomBgColor
			colorIndex="19"
			class="mr-10"
		></u-avatar>
		<view class="width-per-100">
			<!-- 昵称 日期 -->
			<view class="fs-24 flex flex-row flex-nowrap flex-justify-between" style="color: #cacaca;">
				<text class="fs-28">
					{{ comment.name }}
					<text class="ml-10">{{ $u.timeFormat(comment.creationTime, 'mm.dd hh:MM:ss') }}</text>
				</text>
				<u-icon name="chat" color="#cacaca" size="18" @tap="commentReply"></u-icon>
			</view>
			<!-- 评论内容 -->
			<view>
				<text class="fs-26 mt-5 fs-white">{{ comment.content }}</text>
			</view>

			<!-- 评论回复 -->
			<view v-if="comment_reply.length > 0" class="mt-5 fs-white">
				<view
					v-for="(item, index) in comment_reply"
					:key="item.id + 'reply'"
					class="flex flex-row flex-nowrap mt-5"
				>
					<template v-if="index < 1 || !showAll">
						<!-- 头像 -->
						<u-avatar
							:text="item.name.slice(0, 1)"
							fontSize="14"
							:size="26"
							randomBgColor
							colorIndex="19"
							class="mr-10"
						></u-avatar>
						<view class="flex flex-column flex-nowrap">
							<!-- 名字 时间 -->
							<text class="fs-28">
								{{ item.name }}
								<text class="ml-10">
									回复于：{{ $u.timeFormat(item.creationTime, 'mm.dd hh:MM:ss') }}
								</text>
							</text>

							<!-- 评论内容 -->
							<text class="fs-26 mt-5">{{ item.content }}</text>
						</view>
					</template>
				</view>
			</view>
			<view v-show="showAll" class="fs-28 fs-lightblue" @tap="showAll = false">展开全部回复</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'Comment',
	props: ['comment', 'commentReplyInput'],
	data() {
		return {
			showAll: this.comment.comment_reply.length > 1,
		};
	},
	methods: {
		commentReply() {
			this.$emit('update:commentReplyInput', { show: true, comment_id: this.comment.id });
		}
	},
	computed: {
		comment_reply() {
			return this.comment.comment_reply;
		}
	}
};
</script>

<style scoped lang="scss">
.bottom-line {
	border-bottom: 1px solid #aaa;
}
</style>
